<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>店主申请 - 巷陌发现</title>
  <link rel="stylesheet" href="../static/bootstrap-icons/font/bootstrap-icons.css">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
      background-color: #f5f7fa;
      color: #333;
      line-height: 1.6;
      padding: 20px;
    }

    .container {
      max-width: 1000px;
      margin: 0 auto;
    }

    .page-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      padding-bottom: 15px;
      border-bottom: 1px solid #eaeaea;
    }

    .page-title {
      font-size: 24px;
      font-weight: 600;
      color: #333;
    }

    .back-btn {
      background-color: #6c757d;
      color: white;
      border: none;
      padding: 8px 16px;
      border-radius: 4px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 5px;
      transition: background-color 0.3s;
    }

    .back-btn:hover {
      background-color: #5a6268;
    }

    .card {
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
      margin-bottom: 20px;
      overflow: hidden;
    }

    .card-header {
      padding: 15px 20px;
      background-color: #f8f9fa;
      border-bottom: 1px solid #eaeaea;
    }

    .card-title {
      font-size: 18px;
      font-weight: 600;
      color: #333;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .card-body {
      padding: 20px;
    }

    .form-section {
      margin-bottom: 30px;
    }

    .section-title {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 15px;
      color: #333;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .form-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      gap: 15px;
    }

    .form-group {
      margin-bottom: 15px;
    }

    .form-group.full-width {
      grid-column: 1 / -1;
    }

    .form-label {
      display: block;
      margin-bottom: 5px;
      font-weight: 500;
    }

    .form-control {
      width: 100%;
      padding: 10px 12px;
      border: 1px solid #ced4da;
      border-radius: 4px;
      font-size: 16px;
      font-family: inherit;
    }

    .form-control:focus {
      border-color: #6a11cb;
      outline: 0;
      box-shadow: 0 0 0 0.2rem rgba(106, 17, 203, 0.25);
    }

    textarea.form-control {
      min-height: 100px;
      resize: vertical;
    }

    select.form-control {
      cursor: pointer;
    }

    .form-hint {
      font-size: 14px;
      color: #6c757d;
      margin-top: 5px;
    }

    .required::after {
      content: " *";
      color: #dc3545;
    }

    .user-avatar-section {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 20px;
    }

    .user-avatar-large {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      overflow: hidden;
      margin-bottom: 10px;
      border: 4px solid #f0f4f8;
      position: relative;
    }

    .user-avatar-large img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .avatar-upload-btn {
      background-color: rgba(0, 0, 0, 0.5);
      color: white;
      border: none;
      padding: 5px 10px;
      border-radius: 4px;
      cursor: pointer;
      position: absolute;
      bottom: 0;
      width: 100%;
      text-align: center;
      font-size: 12px;
      opacity: 0;
      transition: opacity 0.3s;
    }

    .user-avatar-large:hover .avatar-upload-btn {
      opacity: 1;
    }

    .documents-container {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .document-item {
      margin-bottom: 15px;
    }

    .document-label {
      font-size: 16px;
      font-weight: 500;
      margin-bottom: 10px;
      color: #333;
    }

    .document-upload-area {
      border: 2px dashed #ced4da;
      border-radius: 6px;
      padding: 20px;
      text-align: center;
      cursor: pointer;
      transition: all 0.3s;
    }

    .document-upload-area:hover {
      border-color: #6a11cb;
      background-color: #f8f9fa;
    }

    .document-upload-icon {
      font-size: 40px;
      color: #6c757d;
      margin-bottom: 10px;
    }

    .document-upload-text {
      color: #6c757d;
      margin-bottom: 10px;
    }

    .document-upload-btn {
      background-color: #6a11cb;
      color: white;
      border: none;
      padding: 8px 16px;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
    }

    .document-preview {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
      margin-top: 15px;
    }

    .document-preview-item {
      width: 200px;
      height: 150px;
      border-radius: 6px;
      overflow: hidden;
      border: 1px solid #eaeaea;
      position: relative;
    }

    .document-preview-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .document-remove-btn {
      position: absolute;
      top: 5px;
      right: 5px;
      background-color: rgba(0, 0, 0, 0.7);
      color: white;
      border: none;
      border-radius: 50%;
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 12px;
    }

    .action-buttons {
      display: flex;
      gap: 15px;
      justify-content: flex-end;
      margin-top: 30px;
      padding-top: 20px;
      border-top: 1px solid #eaeaea;
    }

    .btn {
      padding: 10px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 16px;
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: 8px;
      transition: all 0.3s;
    }

    .btn-primary {
      background-color: #6a11cb;
      color: white;
    }

    .btn-primary:hover {
      background-color: #5a0dc8;
    }

    .btn-secondary {
      background-color: #6c757d;
      color: white;
    }

    .btn-secondary:hover {
      background-color: #5a6268;
    }

    /* 模态框样式 */
    .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.5);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 1000;
    }

    .modal-content {
      background-color: white;
      border-radius: 8px;
      width: 90%;
      max-width: 500px;
      max-height: 90vh;
      overflow-y: auto;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    }

    .modal-header {
      padding: 15px 20px;
      border-bottom: 1px solid #eaeaea;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .modal-title {
      font-size: 20px;
      font-weight: 600;
    }

    .modal-close {
      background: none;
      border: none;
      font-size: 24px;
      cursor: pointer;
      color: #666;
    }

    .modal-body {
      padding: 20px;
    }

    .modal-footer {
      padding: 15px 20px;
      border-top: 1px solid #eaeaea;
      display: flex;
      justify-content: flex-end;
      gap: 10px;
    }

    .success-icon {
      font-size: 60px;
      color: #28a745;
      text-align: center;
      margin-bottom: 20px;
    }

    .success-message {
      text-align: center;
      margin-bottom: 20px;
    }

    @media (max-width: 768px) {
      .form-grid {
        grid-template-columns: 1fr;
      }

      .action-buttons {
        flex-direction: column;
      }

      .btn {
        width: 100%;
        justify-content: center;
      }
    }
    /* 验证消息样式 */
    .field-validation-message {
      font-size: 12px;
      margin-top: 5px;
      padding: 4px 8px;
      border-radius: 3px;
    }

    .validation-success {
      background-color: #d4edda;
      color: #155724;
      border: 1px solid #c3e6cb;
    }

    .validation-error {
      background-color: #f8d7da;
      color: #721c24;
      border: 1px solid #f5c6cb;
    }

    /* PDF预览样式 */
    .pdf-preview {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background-color: #f8f9fa;
    }

    /* 文件名称样式 */
    .file-name {
      font-size: 12px;
      margin-top: 5px;
      text-align: center;
      word-break: break-all;
    }

    /* 错误容器样式 */
    .error-container {
      background-color: #f8d7da;
      color: #721c24;
      padding: 15px;
      border-radius: 4px;
      margin-bottom: 20px;
      border: 1px solid #f5c6cb;
    }
  </style>
</head>
<body>
<div class="container">
  <div class="page-header">
    <h1 class="page-title">店主申请</h1>
    <button class="back-btn" onclick="window.history.back()">
      <i class="bi bi-arrow-left"></i> 返回
    </button>
  </div>

  <div class="card">
    <div class="card-header">
      <h2 class="card-title">
        <i class="bi bi-person-plus"></i> 申请成为店主
      </h2>
    </div>
    <div class="card-body">
      <form id="ownerApplicationForm">
        <div class="form-section">
          <h3 class="section-title">
            <i class="bi bi-person-circle"></i> 基本信息
          </h3>

          <div class="user-avatar-section">
            <div class="user-avatar-large">
              <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="用户头像" id="userAvatar">
              <button type="button" class="avatar-upload-btn" onclick="document.getElementById('avatarInput').click()">
                <i class="bi bi-camera"></i> 更换头像
              </button>
              <input type="file" id="avatarInput" accept="image/*" style="display: none;" onchange="handleAvatarUpload(event)">
            </div>
            <div class="form-hint">点击头像可更换</div>
          </div>

          <div class="form-grid">
            <div class="form-group">
              <label class="form-label required" for="realName" readonly>真实姓名</label>
              <input type="text" class="form-control" id="realName" name="realName" required>
            </div>

            <div class="form-group">
              <label class="form-label required" for="gender">性别</label>
              <input type="text" class="form-control" id="gender" name="gender" required readonly>
            </div>

            <div class="form-group">
              <label class="form-label required" for="age" >年龄</label>
              <input type="number" class="form-control" id="age" name="age" min="18" max="100" required readonly>
            </div>

            <div class="form-group">
              <label class="form-label required" for="idCard">身份证号</label>
              <input type="text" class="form-control" id="idCard" name="idCard" required>
            </div>

            <div class="form-group">
              <label class="form-label required" for="phone">手机号</label>
              <input type="tel" class="form-control" id="phone" name="phone" required>
            </div>

            <div class="form-group">
              <label class="form-label required" for="email">邮箱</label>
              <input type="email" class="form-control" id="email" name="email" required>
            </div>

            <div class="form-group full-width">
              <label class="form-label" for="bio">个人简介</label>
              <textarea class="form-control" id="bio" name="bio" placeholder="请简单介绍一下自己..."></textarea>
              <div class="form-hint">请简要介绍您的背景、兴趣和相关经验</div>
            </div>
          </div>
        </div>

        <div class="form-section">
          <h3 class="section-title">
            <i class="bi bi-file-text"></i> 申请信息
          </h3>

          <div class="form-grid">
            <div class="form-group full-width">
              <label class="form-label required" for="applyReason">申请理由</label>
              <textarea class="form-control" id="applyReason" name="applyReason" placeholder="请说明您为什么想成为店主..." required></textarea>
              <div class="form-hint">请详细说明您申请成为店主的动机和理由</div>
            </div>

            <div class="form-group full-width">
              <label class="form-label required" for="businessPlan">经营计划</label>
              <textarea class="form-control" id="businessPlan" name="businessPlan" placeholder="请描述您的经营计划..." required></textarea>
              <div class="form-hint">请描述您计划如何经营店铺，包括内容方向、更新频率等</div>
            </div>


            <div class="form-group">
              <label class="form-label required" for="experience">从业经验</label>
              <input type="text" class="form-control" id="experience" name="experience" placeholder="例如：3年探店经验" required>
            </div>
          </div>
        </div>

        <div class="form-section">
          <h3 class="section-title">
            <i class="bi bi-file-earmark-check"></i> 证明材料
          </h3>

          <div class="documents-container">
            <div class="document-item">
              <div class="document-label required">身份证照片</div>
              <div class="document-upload-area" onclick="document.getElementById('idCardInput').click()">
                <div class="document-upload-icon">
                  <i class="bi bi-cloud-arrow-up"></i>
                </div>
                <div class="document-upload-text">点击上传身份证照片（正面和反面）</div>
                <button type="button" class="document-upload-btn">选择文件</button>
                <input type="file" id="idCardInput" accept="image/*" multiple style="display: none;" onchange="handleIdCardUpload(event)">
              </div>
              <div class="document-preview" id="idCardPreview"></div>
            </div>

            <div class="document-item">
              <div class="document-label required">营业执照</div>
              <div class="document-upload-area" onclick="document.getElementById('businessLicenseInput').click()">
                <div class="document-upload-icon">
                  <i class="bi bi-cloud-arrow-up"></i>
                </div>
                <div class="document-upload-text">点击上传营业执照照片</div>
                <button type="button" class="document-upload-btn">选择文件</button>
                <input type="file" id="businessLicenseInput" accept="image/*" style="display: none;" onchange="handleBusinessLicenseUpload(event)">
              </div>
              <div class="document-preview" id="businessLicensePreview"></div>
            </div>

            <div class="document-item">
              <div class="document-label">其他材料</div>
              <div class="document-upload-area" onclick="document.getElementById('otherDocumentsInput').click()">
                <div class="document-upload-icon">
                  <i class="bi bi-cloud-arrow-up"></i>
                </div>
                <div class="document-upload-text">点击上传其他证明材料（可选）</div>
                <button type="button" class="document-upload-btn">选择文件</button>
                <input type="file" id="otherDocumentsInput" accept="image/*" multiple style="display: none;" onchange="handleOtherDocumentsUpload(event)">
              </div>
              <div class="document-preview" id="otherDocumentsPreview"></div>
            </div>
          </div>
        </div>

        <div class="action-buttons">
          <button type="button" class="btn btn-secondary" onclick="window.history.back()">
            <i class="bi bi-arrow-left"></i> 取消
          </button>
          <button type="submit" class="btn btn-primary">
            <i class="bi bi-send"></i> 提交申请
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- 提交成功模态框 -->
<div class="modal-overlay" id="successModal" style="display: none;">
  <div class="modal-content">
    <div class="modal-header">
      <h3 class="modal-title">申请提交成功</h3>
      <button class="modal-close" onclick="closeSuccessModal()">&times;</button>
    </div>
    <div class="modal-body">
      <div class="success-icon">
        <i class="bi bi-check-circle"></i>
      </div>
      <div class="success-message">
        <p>您的店主申请已成功提交！</p>
        <p>我们将在3-5个工作日内完成审核，审核结果将通过短信和邮件通知您。</p>
      </div>
    </div>
    <div class="modal-footer">
      <button class="btn btn-primary" onclick="closeSuccessModal()">确定</button>
    </div>
  </div>
</div>
<script src="../static/js/jquery.js"></script>
<script src="../static/js/jquery.cookie.js"></script>
<script src="../static/js/UserOwnerApplication.js"></script>
</body>
</html>